Realiziamo un Jumpmenu
Tutorial scritto il 13/05/03  da Luca Ruggiero
Sito Web: http://www.lukeonweb.net  

Il cosiddetto JumpMenu è un menu a scelta rapida, utile sia per l'utente (per una navigazione più agevole) che per lo sviluppatore (onde ottimizzare spazio sulla pagina e risorse).
Viene realizzato mediante l'utilizzo del Tag Html <select>, ed animato con un piccolo script ad hoc.

Creiamo sia il codice Html che lo script in un'unica routine Javascript: 


function JumpMenu(links) {
//Crea un link all'indice della select selezionato
location.href = links[links.selectedIndex].value;
}

//Crea la tabella di dati contenente le voci delle possibili opzioni
var voci = new Array();
voci[0] = "Pagina 1";
voci[1] = "Pagina 2";
voci[2] = "Pagina 3";
voci[3] = "Pagina 4";
voci[4] = "Pagina 5";
//Crea la tabella di dati contenente i link alle rispettive voci delle opzioni

var link = new Array();
link[0] = "pagina1.htm";
link[1] = "pagina2.htm";
link[2] = "pagina3.htm";
link[3] = "pagina4.htm";
link[4] = "pagina5.htm";

//Crea la struttura Html della select, all'evento onChange lancia la funzione
document.write("<select onChange=JumpMenu(this)>");
document.write("<option value=#>Jump to...</option>");

//Esegue un ciclo ed estende tutte le voci del menu con i relativi valori
for(i=0; i<5; i++) {
document.write("<option value=" + link[i] + ">" + voci[i] + "</option>");
}

document.write("</select>");


Non vi resta che copiare il codice qui sopra, apportare le modifiche ai nomi e link delle vostre pagine e copiare il tutto nella vostra pagina Html... e il gioco è fatto!!


  
 
Iscriviti allo scambio banner di BannerGratis.it